<!--
 * @Author: your name
 * @Date: 2021-10-22 17:12:35
 * @LastEditTime: 2021-10-26 20:14:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \estore-manage\src\pages\base\order\orderDetails.vue
-->
<template>
    <div>
        <router-link to="/order/orderList">返回</router-link>
        <div class="table">
            <el-table :data="orderDetails.orderLines" >
                 <el-table-column  label="产品名">
                    <template v-slot="scope">
                        <img width="100px" height="100px" :src="scope.row.product.photo" alt="">
                        <span>{{scope.row.product.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="productId" label="产品编号"></el-table-column>
               <el-table-column label="订单项编号" prop="id">
                </el-table-column>
                <el-table-column label="单价" prop="product.price">
                    <template v-slot="scope">
                        $ &nbsp;&nbsp;{{scope.row.product.price}}
                    </template>
                </el-table-column>
                <el-table-column label="数量" prop="product.number">
                    <template  v-slot="scope">
                        {{scope.row.number}}&nbsp;&nbsp;次
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="order_content">
            <div class="basic">
                <div class="title">
                    订单基本情况
                </div>
                
                <div class="ul" >
                    <li >订单编号：{{orderDetails.id}}</li>
                    <li >订单金额：$ {{orderDetails.total}}</li>
                    <li >订单时间：{{orderDetails.orderTime | formatTime}}</li>
                    <li >订单状态：{{orderDetails.status}}</li>

                </div>

            </div>
            <div class="customerInfo">
                <div class="title">
                    下单者信息
                </div>
                <div class="ul">
                    <li >下单人：{{orderDetails.customer.realname}}</li>
                    <li >下单手机：$ {{orderDetails.customer.telephone}}</li>
                    <li >收支：{{orderDetails.customer.balance}}</li>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            orderDetails:[]
        }
    },
    methods:{
        loadOrderDetails(){
            this.orderDetails = this.$route.params.params
           console.log(this.orderDetails);
        }
    },
    mounted(){
        this.loadOrderDetails();
       
    }
    
}
</script>
<style lang='scss'  scoped>
.order_content{
    margin-top: 40px;
    display: flex;
    li{
        list-style: none;
       
         margin: 10px;

    }
     .title{
           height: 40px;
             
            line-height: 40px;         
            background-color: skyblue;
            border-radius:5px ;
            text-align: center;
           
        }
    .basic{
        border: 1px solid #f4f4f4;
        width: 320px;  
        margin-left: 200px;
        height: 200px;
        .ul>li{
        }
    }
    .customerInfo{
        border: 1px solid #f4f4f4;
        width: 320px;    
        margin-left: 200px;
    }

}
</style> 

